<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../css/layui.css" media="all">		
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>
	</head>

	<body>
		<div class="layui-container">

			<div class="layui-row">
				<div id="app">
					
						<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
							<legend>重点课程</legend>
							<div style="margin-top: 15px; margin-bottom: 35px; margin-left: 20px;">
								<template v-for="course in courses">
									<span v-if="selectCourse==course.couId" style="border:2px solid #FFFFFF;">
							<button  class="layui-btn layui-btn-radius" @click="selectCourse=null;getLists(selectCourse)">{{course.couName}}</button>
						</span>
									<span v-if="selectCourse!=course.couId" style="border:2px solid #FFFFFF;">
							<button  class="layui-btn layui-btn-primary layui-btn-radius" @click="selectCourse=course.couId;getLists(selectCourse)">{{course.couName}}</button>
						</span>
								</template>

								<!--<button data-method="offset" data-type="auto" class="layui-btn layui-btn-primary layui-btn-radius" onclick="add()">+</button>-->

							</div>

							<div class="demoTable" style="margin-bottom: 10px;">
								
								<div class="layui-inline">
									<input class="layui-input" name="selectExample" id="demoReload" autocomplete="off" placeholder="支持课程名、实验名" v-model="selectExample" style="margin-left: 20px;">
									
								</div>
								<button class="layui-btn" data-type="reload" @click="getListByExample()" style="margin-left: 20px;">搜索</button>
								<div style="float:right ;">
									 切换至：<button class="layui-btn layui-btn-normal" title="筛选课程" style="margin-right: 20px;" type="button" v-model="show" @click="showchange()">
							<p v-if="show==false">已上课程</p>
							<p v-if="show==true">未上课程</p>
						</button>
								</div>
							</div>
						</fieldset>

						<div style="margin-top: 15px;">
							<table class="layui-table">
								<colgroup>
									<col width="150">
									<col width="150">
									<col width="200">
									<col width="200">
									<col width="200">
									<col width="200">
									<col width="200">
									<col width="200">
								</colgroup>
								<thead>
									<tr>
										<th>实验序号</th>
										<th>课程名</th>
										<th>实验名</th>
										<th>实验班</th>
										<th>实验地点</th>
										<th>开始时间</th>
										<th>结束时间</th>
										<th>实验操作</th>
									</tr>
								</thead>
								<tbody>
									<template v-for="operateshow in operateshows">
										
											<tr>
												<td>{{operateshow.operate.expId}}</td>
												<td>{{operateshow.course.couName}}</td>
												<td>{{operateshow.expName}}</td>
												<td>{{operateshow.cla.claGrade}}级{{operateshow.cla.claName}}</td>
												<td>{{operateshow.operate.location}}</td>
												<td>{{operateshow.operate.beginTime}}</td>
												<td>{{operateshow.operate.endTime}}</td>
												<td>
													<a class="layui-btn layui-btn-normal" @click="edit(operateshow.operate.expId,operateshow.cla.claId)" v-if="show==false">编辑</a>
													<!--<a class="layui-btn layui-btn-xs" @click="selectexp=expshow.expId;selectexpmin=expmin.claId;">编辑</a>-->
													<!--<a class="layui-btn layui-btn-danger layui-btn-xs" @click="del(expshow.expId,expmin.claId)">删除</a>-->
												</td>
											</tr>											
									
									</template>

								</tbody>

							</table>
					
					<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
					<legend>不显示首页尾页</legend>
				</fieldset>-->
					<!--<div id="demo4"></div>-->
					</div>
				</div>
			</div>
		</div>
		<script src="../../layui.js" charset="utf-8"></script>
		<script src="../../js/jquery.cookie.js"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

		<script>
			$.ajax({
				type: "get",
				url: "http://localhost:8080/teacher/experiment/nothing.do",
				async: false,
				dataType: "json",
				data: {
						uid: $.cookie("uid")
					},
				success: function(data) {
					//alert(data.info);
					if(data.info == '404') {
						window.location.href = "../login/teacherlogin.html";
					}
				}
			});
			var courses;			
			$.ajax({
				type: "get",
				url: "http://localhost:8080/teacher/course/list.do",
				dataType: "json",
				async: false,
				data: {
						uid: $.cookie("uid")
					},
				success: function(data) {
					if(data.info == '404'){
						//alert(data);
						window.location.href="../login/teacherlogin.html";
					}else{
						courses = data;
					}
				}
			});
			var operateshows;
			//console.log(courses);

			function getList(selectCourse, selectExample, show) {
				$.ajax({
					type: "get",
					url: "http://localhost:8080/teacher/operate/operateList.do",
					data: {
						courses: courses,
						selectCourse: selectCourse,
						selectExample: selectExample,
						show: show,
						uid: $.cookie("uid")
					},
					dataType: "json",
					async: false,
					success: function(data) {
						operateshows = data;
					}
				});
			}
			getList();
		
			var vue = new Vue({
				el: "#app",
				data: {
					operateshows: operateshows,
					courses: courses,
					selectexp: 0,
					selectexpmin: 0,
					selectCourse: 0,
					selectExample: null,
					count: 5,
					show: false

				},
				computed: {					
					
				},
				methods: {
					showMore: function(expId, claId) {
						//alert(expId + " " + claId);
						/*window.location.href = "operateInfo.html?expId=" + expId + "&claId=" + claId;*/
					},
					edit: function(expId,claId) {
						
						//alert(expId + " " + claId);
							layer.open({
								id: 'update-form',
								title: '修改实验信息',
								type: 2,
								content: 'editOperate.html?expId=' + expId + "&claId=" + claId,
								area: ['800px', '500px'],
								btn: ['立即提交', '关闭'],
								shadeClose: true,
								yes: function(index) {
									location.reload(true);
									updateSubmit();
									
								}, //关闭弹层时会调刷新本页面
								btn2: function(index) {
									layer.close(index);
								}

							});

					},
					getLists: function(selectCourse) {
						//alert("1");
						this.selectExample = null;
						getList(selectCourse, this.selectExample);
						vue.operateshows = operateshows;
					},
					getListByExample: function() {
						this.selectCourse = 0;
						//alert(this.selectExample);
						getList(null, this.selectExample);
						vue.operateshows = operateshows;
					},
					
					showchange: function() {
						vue.show = !(vue.show);
						this.selectExample = null;
						this.selectCourse = null;
						getList(null, null, vue.show);
						vue.operateshows = operateshows;
						//alert(vue.show)

					}

				}
			});

		
			layui.use(['form', 'laypage', 'layer', 'laydate'], function() {
				var form = layui.form,
					laypage = layui.laypage,
					layer = layui.layer,
					laydate = layui.laydate;

			});
			layui.use('laydate', function() {
				var laydate = layui.laydate;

				//日期时间选择器
				laydate.render({
					elem: '#test5',
					type: 'datetime'
				});
				//日期时间选择器
				laydate.render({
					elem: '#test6',
					type: 'datetime'
				});

				
			});
			

			/*function add() {

				layer.open({
					id: 'insert-form',
					title: '添加新课程',
					type: 2,
					content: '../exp/addCoursemin.html',
					area: ['800px', '500px'],
					btn: ['立即提交', '关闭'],
					shadeClose: true,
					yes: function(index) {
						insertSubmit();
						location.reload(true);
					}, //关闭弹层时会调刷新本页面
					btn2: function(index) {
						layer.close(index);
					}

				});
			};

			function insertSubmit() {
				var frameId = document.getElementById('insert-form').getElementsByTagName("iframe")[0].id;
				$('#' + frameId)[0].contentWindow.mySubmit();
			}*/
			function updateSubmit() {
					var frameId = document.getElementById('update-form').getElementsByTagName("iframe")[0].id;
					$('#' + frameId)[0].contentWindow.mySubmit();
				}
		</script>

	</body>

</html>